<template>
	<view>
		<uni-grid :showBorder="false">
			<uni-grid-item v-for="(item, index) in oaList" :index="index" :key="index">
				<view class="grid-item-box" @click="toPath(item)">
					<text class="iconfont-oa" :class="[item.icon, item.isOpen ? 'icon-active' : 'icon-unactive']"></text>
					<text class="text" :class="{unOpenText: !item.isOpen}">{{ item.title }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	export default {
		components: {
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				oaList: [{
					title: "电子邮件",
					icon: "icon-oa-youxiang-",
					isOpen: false
				}, {
					title: "待办事项",
					icon: "icon-oa-wenzhang-copy",
					path: "./../whileToDo/whileToDo",
					isOpen: true
				}, {
					title: "公告通告",
					icon: "icon-oa-gonggao",
					isOpen: false
				}, {
					title: "日程安排",
					icon: "icon-oa-riliricheng",
					isOpen: false
				}, {
					title: "工作日志",
					icon: "icon-oa-rizhi",
					isOpen: false
				}, {
					title: "个人文件",
					icon: "icon-oa-wenjian",
					isOpen: false
				}, {
					title: "公共文件",
					icon: "icon-oa-wenjian1",
					isOpen: false
				}, {
					title: "天气预报",
					icon: "icon-oa-tianqi",
					isOpen: false
				}]
			}
		},
		methods: {
			// 跳转项目
			toPath(item) {
				console.log(item)
				if(item.isOpen) {
					console.log(item.path)
					uni.navigateTo({
						url: item.path
					})
				} else {
					uni.showToast({
						title: "暂未开放",
						icon: "none",
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style scoped>
	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.iconfont-oa {
		font-size: 48rpx;
	}
	
	.icon-active {
		color: #333333;
	}

	.text {
		font-size: 26rpx;
		margin-top: 20rpx;
		color: #333333;
	}
	
	.unOpenText {
		color: #888888;
	}
</style>
